import { calculateAngleDifference } from "@/utils/antvx6/incomingToOutgoing";
/**
 * 鼠标光标上显示坐标系
 * @param { HTMLElement }  elementGraph  antv x6 元素
 * @param { HTMLElement }  containers DOM元素
 * @param { boolean } bool 是否显示坐标系
 */
// 角度值
let angleSpToTp = 0;
export const realTimeCoordinates = (elementGraph: any, containers: any, bool: boolean) => {
  // 创建一个跟随鼠标移动的div
  const cursorOverlay = document.createElement("div");
  cursorOverlay.id = "cursorOverlay";
  cursorOverlay.style.position = "absolute";
  cursorOverlay.style.pointerEvents = "none"; // 确保鼠标事件能穿透到画布
  cursorOverlay.style.zIndex = "0";
  cursorOverlay.style.display = "flex";
  cursorOverlay.style.alignItems = "center";
  cursorOverlay.style.justifyContent = "center";
  cursorOverlay.style.width = "auto";
  cursorOverlay.style.height = "auto";
  cursorOverlay.style.margin = "5px";
  cursorOverlay.style.padding = "5px";
  cursorOverlay.style.color = "black";
  cursorOverlay.style.backgroundColor = "rgba(245, 145, 15, 0.75)"; // 半透明背景
  cursorOverlay.style.borderRadius = "5px";
  // 创建一个指引线
  const v = document.createElement("div");
  v.id = "vWidth";
  v.style.position = "absolute";
  v.style.pointerEvents = "none"; // 确保鼠标事件能穿透到画布
  v.style.width = "1px";
  v.style.top = "0";
  v.style.bottom = "0";
  v.style.left = "-100px";
  v.style.zIndex = `99`;
  v.style.borderLeft = "1px dashed red";
  const h = document.createElement("div");
  h.id = "hHeight";
  h.style.position = "absolute";
  h.style.pointerEvents = "none"; // 确保鼠标事件能穿透到画布
  h.style.height = "1px";
  h.style.left = "0";
  h.style.right = "0";
  h.style.top = "-100px";
  h.style.zIndex = `99`;
  h.style.borderTop = "1px dashed red";
  if (bool) {
    const parentElementBool = containers.querySelector("#cursorOverlay");
    if (!parentElementBool) {
      containers.appendChild(v);
      containers.appendChild(h);
      containers.appendChild(cursorOverlay);
    }
  }
  const mousemoveFunCtion = (event: any) => {
    const target = event.target as HTMLElement;
    if (target === v || target === h || containers === target || containers.contains(target)) {
      // 阻止事件冒泡，如果不需要可以去掉这一行
      event.preventDefault();
      // 获取鼠标在画布上的坐标
      const position = { x: event.offsetX, y: event.offsetY };
      const positionClient = elementGraph.clientToLocal(event.clientX, event.clientY);
      // 更新div的位置和内容
      v.style.left = `${position.x + 2}px`;
      h.style.top = `${position.y + 2}px`;
      cursorOverlay.style.left = `${position.x}px`;
      cursorOverlay.style.top = `${position.y}px`;
      cursorOverlay.textContent = `X: ${positionClient.x.toFixed(0)}, Y: ${positionClient.y.toFixed(0)} ${angleSpToTp ? ", deg:" + angleSpToTp : ""}`;
    } else {
      v.style.left = `${-100000}px`;
      h.style.top = `${-100000}px`;
      cursorOverlay.style.left = `${-100000}px`;
      cursorOverlay.style.top = `${-100000}px`;
    }
  };
  if (!bool) {
    document.removeEventListener("mousemove", mousemoveFunCtion);
    const cursorOver = document.getElementById("cursorOverlay") as any;
    const cursorH = document.getElementById("hHeight") as any;
    const cursorV = document.getElementById("vWidth") as any;
    cursorOver ? containers.removeChild(cursorOver) : "";
    cursorH ? containers.removeChild(cursorH) : "";
    cursorV ? containers.removeChild(cursorV) : "";
  } else {
    // 添加鼠标移动事件监听器
    document.addEventListener("mousemove", mousemoveFunCtion);
  }
};

// 根据坐标系计算角度差值
export const getSourceToTarget = (sourcePoint: any, targetPoint: any, startPoint: any) => {
  if (sourcePoint && targetPoint && startPoint) {
    // 计算差值输入的角度值
    const delta1X = startPoint.x - sourcePoint.x;
    const delta1Y = startPoint.y - sourcePoint.y;
    // 转换为度
    const angle1 = Math.atan2(delta1Y, delta1X) * (180 / Math.PI);
    const angleTofixed1 = angle1 === 0 ? 0 : -angle1.toFixed(0);
    // 计算差值输出的角度值
    const deltaX = targetPoint.x - sourcePoint.x;
    const deltaY = targetPoint.y - sourcePoint.y;
    // 转换为度
    const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
    const angleTofixed = angle === 0 ? 0 : -angle.toFixed(0);
    angleSpToTp = calculateAngleDifference(angleTofixed1, angleTofixed);
  } else {
    angleSpToTp = 0;
  }
};
